<header class="header-container" ng-include="'/partials/header.html'"></header>
<div class="middle-container">
    <div class="profile-box">
        <div class="profile-data">
            <div class="update-form">
                <form class="form-horizontal" gm-checksley-form="ctrl.submitProfile(authForm)">
                    <fieldset>
                        <label i18next="profile.username">Username:</label>
                        <input type="text" name="username" data-required="true" value="" ng-model="authForm.username"></input>
                    </fieldset>

                    <fieldset>
                        <label i18next="profile.full-name">Full name:</label>
                        <input type="text" name="full_name" data-required="true" value="" ng-model="authForm.full_name"></input>
                    </fieldset>

                    <fieldset>
                        <label i18next="profile.notification-level">Notification level:</label>
                        <select type="text" name="notify_level" data-required="true" ng-model="authForm.notify_level"
                            ng-options="key as value for (key, value) in notificationLevelOptions" ng-required="true">
                            <option value="" i18next="profile.select-option">Select one option</option>
                        </select>
                    </fieldset>
                    <fieldset>
                        <label i18next="profile.notify-changes-by-me">Notify changes by me:</label>
                        <input type="checkbox" name="notify_changes_by_me" ng-model="authForm.notify_changes_by_me"></input>
                    </fieldset>

                    <fieldset>
                        <label i18next="profile.email">Email:</label>
                        <input type="text" data-type="email" name="email" data-required="true" value="" ng-model="authForm.email"></input>
                    </fieldset>

                    <fieldset>
                        <label i18next="profile.language">Language:</label>
                        <select type="text" name="default_language" ng-model="authForm.default_language"
                            ng-options="key as value for (key, value) in languageOptions">
                            <option value="" i18next="profile.use-site-language">Use site language</option>
                        </select>
                    </fieldset>

                    <fieldset class="colorPicker">
                        <label i18next="profile.color">Color:</label>
                        <div class="colorSample" style="background-color: {{authForm.color}}"
                             gm-template-popover="color-picker-popover"
                             gm-popover-model="authForm" ></div>
                        <input type="text" name="color" data-required="true" value="" ng-model="authForm.color"></input>
                    </fieldset>


                    <fieldset class="issue-edit-submit">
                        <button type="submit" class="button button-edit" gm-checksley-submit-button i18next="profile.save">Save</button>
                    </fieldset>
                </form>
            </div>
        </div>

        <div class="profile-password">
            <div class="update-form">

                <form class="form-horizontal" gm-checksley-form="ctrl.submitPassword()">
                    <fieldset>
                        <label i18next="profile.password">Password:</label>
                        <input name="password" type="password" ng-model="formData.password" data-minlength="6"></input>
                    </fieldset>

                    <fieldset class="issue-edit-submit">
                        <button type="submit" class="button button-edit" gm-checksley-submit-button i18next="profile.save">Save</button>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/ng-template" id="color-picker-popover">
    <div class="colorSelector" coffee-color-picker="authForm.color = $color" coffee-color-picker-options="{color: {hue:100, sat: 100, lit: 25}}"></div>
</script>
